<template>
	<view class="orderlist-box">
		<MyTabs :title="title" :isFixed='true' :activeTabs='isIndex' @tabsHandle="showTitle"></MyTabs>
		<view class="orderlist-big-box">
			<view class="orderlist-big-item" @click="gotoOrder" :data-id='item.id' v-for="(item,index) in orderList" :key="index">
				<view class="orderlist-top-title">
					<view class="orderlist-top-title-left">订单编号:{{item.ordernum}} </view>
					<!-- 待接单 -->
					<view class="orderlist-top-title-right" v-if='item.status == 0 && item.is_evaluate == 0' style="color:#00CB8B">{{item.status_text}}</view>
					<!-- 已接单 -->
					<view class="orderlist-top-title-right" v-if='item.status == 7 && item.is_evaluate == 0' style="color:#00CB8B">{{item.status_text}}</view>
					<!-- 已完成 -->
					<view class="orderlist-top-title-right" v-if='item.status == 9 && item.is_evaluate == 0' style="color:#333">{{item.status_text}}</view>
					<!-- 已取消 -->
					<view class="orderlist-top-title-right" v-if='item.status == -1 && item.is_evaluate == 0' style="color:#333">{{item.status_text}}</view>
					<!-- 已评论 -->
					<view class="orderlist-top-title-right" v-if='item.status == 9 && item.is_evaluate == 1' style="color:#00CB8B">{{item.status_text}}</view>
				</view>
				<view class="orderlist-item-p">
					<view class="orderlist-item-p-left">联系人</view>
					<view class="orderlist-item-p-right">{{item.contact}}</view>
				</view>
				<view class="orderlist-item-p">
					<view class="orderlist-item-p-left">联系电话</view>
					<view class="orderlist-item-p-right">{{item.mobile}}</view>
				</view>
				<view class="orderlist-item-p">
					<view class="orderlist-item-p-left">上门地址</view>
					<view class="orderlist-item-p-right">{{item.province}}{{item.city}}{{item.country}}{{item.address}}</view>
				</view>
				<view class="orderlist-item-p">
					<view class="orderlist-item-p-left">预约时间</view>
					<view class="orderlist-item-p-right">{{item.yuyue_date}} {{item.yuyue_start_time}}~{{item.yuyue_end_time}}</view>
				</view>
				<view class="orderlist-item-p">
					<view class="orderlist-item-p-left">回收类别</view>
					<view class="orderlist-item-p-right">{{item.items}}</view>
				</view>
				<view style="width: 100%;height: 1px;background: #F6F6F6;margin-top: 10px;margin-bottom: 15px;"></view>
				<view class="order-list-bottom">
					<view class="order-list-bottom-left">
						{{item.ordertime_text}}
					</view>
					
					<view v-if="item.status == 0 && item.is_evaluate == 0" class="order-list-bottom-btn" @click.stop="quxiaoOrder(item.id)">取消订单</view> 
					<view v-if="item.status == 9 && item.is_evaluate == 0" class="order-list-bottom-btn" @click.stop="qupingjia(item.id)">去评价</view>
				</view>
			</view>
			<view v-if="orderList.length <= 0" style="width: 100%;text-align: center;margin: 20px 0;">~暂无数据~</view>
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	import myTabs from '../../components/tabs/myTabs.vue'
	
	export default {
		data(){
			return{
				title:[],
				titleArray:[],
				isIndex:0,
				pages:1,
				orderList:[],
				checkId:'0',//选中顶部ID
			}
		},
		onLoad(options) {
			this.checkId = options.id
			this.titleData()
			this.pages = 1
			if(options.id){
				this.InitList(options.id)
			}else{
				this.InitList(0)
			}
		},
		onReachBottom(){
			this.pages = this.pages+1
			this.InitList(0)
		},
		methods:{
			titleData(){
				let _this = this
				http.getUserStatus().then((res)=>{
					if(res.data.code == 1){
						let data = res.data.data 
						_this.titleArray = res.data.data
						_this.titleArray.forEach((item,index)=>{
							if(item.id == _this.checkId){
								_this.isIndex = index
							}
							_this.title.push(item.name)
						})
					}
				})
			},
			showTitle(index){
				this.isIndex = index
				this.pages = 1
				this.orderList = []
				this.InitList(this.titleArray[index].id)
			},
			InitList(type){
				// 0-未接单，1-已接单，2-已完成，-1-已取消，3-待评价
				let _this = this
				uni.showLoading()
				http.getUserOrderList({status:type,page:_this.pages}).then((res)=>{
					uni.hideLoading()
					if(res.data.code == 1){
						_this.orderList = _this.orderList.concat(res.data.data)
					}else{
						uni.showToast({
							title:res.data.msg,
							icon:none
						})
					}
				})
			},
			gotoOrder(e){
				let id = e.currentTarget.dataset.id
				uni.navigateTo({
					url:'/pages/my/orderDetail?id='+id
				})
			},
			quxiaoOrder(id){
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否取消该订单？',
					success: function (res) {
						if (res.confirm) {
							http.getUserCancelOrder({id:id}).then((res)=>{
								if(res.data.code == 1){
									
									uni.showToast({
										title:'取消成功',
										icon:'none'
									})
									setTimeout(function(){
										_this.pages = 1
										_this.orderList = []
										_this.InitList(_this.titleArray[_this.isIndex].id)
									},1000)
								}
							})
						}
					}
				})
			},
			qupingjia(id){
				uni.navigateTo({
					url:'/pages/my/evaluate?id='+id
				})
			}
		},
		components:{
			myTabs
		}
	}
</script>

<style>
	.orderlist-box{
		width: 100%;
		min-height: 100vh;
		background: #F8F9FD;
	}
	.orderlist-title{
		width: 100%;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
	}
	.orderlist-title-item{
		width: 100%;
		display: flex;flex-direction: row;align-items: center;
	}
	.orderlist-item-btn{
		flex: 1;
		height: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
	}
	.xianp-box{
		width: 100%;
		height: 3px;
		position: relative;
	}
	.xianp-box-item{
		width: 35px;
		height: 100%;
		background: #00CB8B;
		position: absolute;
		top: 0;
	}
	.orderlist-big-box{
		width: 100%;
		box-sizing: border-box;
		padding: 12px;
	}
	.orderlist-big-item{
		width: 100%;
		background: #fff;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 15px 20px;
		margin-bottom: 12px;
	}
	.orderlist-top-title{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25px;
	}
	.orderlist-item-p{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 12px;
		color: #999;
		margin-bottom: 10px;
	}
	.orderlist-item-p-left{
		width: 55px;
		text-align: justify;
		text-align-last: justify;
		margin-right: 20px;
	}
	.orderlist-item-p-right{
		width: calc(100% - 75px);
	}
	.order-list-bottom{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.order-list-bottom-left{
		color: #999;
		font-size: 12px;
	}
	.order-list-bottom-btn{
		width: 88px;
		height: 35px;
		color: #999;
		text-align: center;
		line-height: 35px;
		border: 1px solid #999;
		border-radius: 10px;
	}
	.orderlist-top-title-left{
		font-size: 16px;
		font-family: 'PingFang Bold';
		color: #333;
		font-weight: 500;
		line-height: 20px;
	}
	.orderlist-top-title-right{
		font-size: 16px;
		font-family: 'PingFang Bold';
		font-weight: 500;
		color: #333;
		line-height: 22px;
	}
</style>